```jsx
import * as select from "@zag-js/select"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { createMemo, createUniqueId } from "solid-js"

const selectData = [
  { label: "Nigeria", value: "NG" },
  { label: "Japan", value: "JP" },
  //...
]

export function Select() {
  const service = useMachine(select.machine, {
    id: createUniqueId(),
    collection: select.collection({
      items: selectData,
    }),
  })

  const api = createMemo(() => select.connect(service, normalizeProps))

  return (
    <div>
      <div>
        <label {...api().getLabelProps()}>Label</label>
        <button {...api().getTriggerProps()}>
          <span>{api().valueAsString || "Select option"}</span>
        </button>
      </div>

      <div {...api().getPositionerProps()}>
        <ul {...api().getContentProps()}>
          {selectData.map((item) => (
            <li key={item.value} {...api().getItemProps({ item })}>
              <span>{item.label}</span>
              <span {...api().getItemIndicatorProps({ item })}>✓</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}
```
